<template>
    <a class="back" @click="goBack" :style="{'top':(type==1 && statusBarHeight)?(statusBarHeight +'px'):''}">
        <img src="/images/back.png"/>
    </a>
</template>

<script>
import { reactive,toRefs,onMounted,getCurrentInstance,computed } from "vue";
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {H5CallAPPFuction} from '@/utils/common'
export default {
    props:['title','to','type'],
    setup(props,context){
        const router = useRouter()
        const store = useStore()

        const state = reactive({
            statusBarHeight:computed(()=>store.state.arApi.statusBarHeight)
        })
        const goBack = ()=>{
            if(props.to){
               router.push(props.to)
            }else{
                try {
                    console.log("返回处理准备调用app方法")
                    H5CallAPPFuction('backToHome')   // 调用app方法处理返回
                } catch (error) {
                    console.log("返回处理没有调到app方法，")
                    router.back()
                }  
            } 
        }
        return {
            ...toRefs(state),
            goBack
        }
    }
}
</script>

<style lang="scss" scoped>
    .back{
        display: flex;
        position: absolute;
        z-index: 10;
        height: 100%;
        width: 100px;
        left: 0;
        top: 0;
        justify-content: center; /* 水平居中 */
        align-items: center;     /* 垂直居中 */
        &.dtBack{
            position: fixed!important;
            z-index: 10!important;
            height: 80px!important;
            width: 80px!important;
        }
        i{
            font-size: 32px;
        }
        img{
            width: 36px;
            height: 36px;
        }
    }
</style>